<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>My first three.js app</title>
    <style>
        body { margin: 0; }
        canvas { display: block; }
        .demo{
            color: #68ac7a;
        }
    </style>
</head>
<body>
<script type="module">
    import * as THREE from "https://unpkg.com/three@0.119.0/build/three.module.js"
    import { OrbitControls } from "https://unpkg.com/three@0.119.0/examples/jsm/controls/OrbitControls.js";
    import { OBJLoader } from "https://unpkg.com/three@0.119.0/examples/jsm/loaders/OBJLoader.js"
    import { MTLLoader } from "https://unpkg.com/three@0.119.0/examples/jsm/loaders/MTLLoader.js"
    import { PickHelper } from "./PickHelper.js"
    // import { FBXLoader } from "https://unpkg.com/three@0.119.0/examples/jsm/loaders/FBXLoader.js"

    let scene,camera,renderer,controls;
    const pickPosition = {x:0,y:0};

    //创建场景
    function initScene() {
        scene = new THREE.Scene();
    }
    //创建相机
    function initCamera() {
        camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
        camera.position.set(0,20,100);
    }
    //创建渲染器，设置尺寸为窗口尺寸，并将渲染后的元素添加到body
    function initRenderer() {
        renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);
        renderer.setClearColor('#dedfe5',1.0);
        document.body.appendChild(renderer.domElement);
    }
    //创建控制器
    function initControls() {
        controls = new OrbitControls(camera,renderer.domElement);
    }
    //创建光源
    function initLight() {
        var ambient = new THREE.AmbientLight(0xffffff);
        scene.add(ambient);
    }
    //更新
    function update() {
        controls.update();
    }
    //加载3D模型
    function load3DModule_obj() {
        const objloader = new OBJLoader();
        const mtlLoader = new MTLLoader();
        mtlLoader.load('./demo.mtl',function (mtl) {
            mtl.preload();
            objloader.setMaterials(mtl);
        })
        objloader.load('./demo.obj',function (root) {
            var material = new THREE.MeshLambertMaterial({ color: 0xd0d005});
            root.traverse(node => {
                node.material = material
            })
            root.position.y = 50;
            scene.add(root);
        })
    }
    //创建底层网格
    function initGrid() {
        var gridHelper = new THREE.GridHelper( 400, 40, 0x0000ff, 0x808080 );
        gridHelper.position.y = 0;
        gridHelper.position.x = 0;
        scene.add( gridHelper );
    }
    function initContent() {
        //创建楼层平面，并添加到场景中

        let cubeGeometry = new THREE.BoxGeometry(100, 3 ,20);
        let material = new THREE.MeshLambertMaterial({ color: 0x0000ff,transparent:true,opacity:0.3});
        let edgesMtl =  new THREE.LineBasicMaterial({color: 0x1535f7});

        var floor = new THREE.Mesh(cubeGeometry, material);

        // THREE.EdgesHelper has been removed. Use THREE.EdgesGeometry instead.
        let cubeEdges = new THREE.EdgesGeometry(cubeGeometry, 1);
        // edgesMtl.depthTest = false;
        let cubeLine = new THREE.LineSegments(cubeEdges, edgesMtl);

        floor.add(cubeLine);

        //楼层复制
        var group = new THREE.Group();
        group.rotation.set(0,3,0);
        for (let i = 0; i < 10; i++) {
            var mesh = floor.clone();
            mesh.translateY(i*3);
            group.add(mesh);
        }

        scene.add(group);
    }
    function init() {
        initScene();
        initCamera();
        initRenderer();
        initLight();
        initControls();
        // initGrid();
        initContent();
    }

    //浏览器每次渲染的时候更新立方体的旋转角度
    const pickHelper = new PickHelper();
    var animate = function () {
        requestAnimationFrame(animate);

        controls.update();

        pickHelper.pick(pickPosition,scene,camera);

        renderer.render(scene, camera);
    };

    function setPickPosition(event) {
        pickPosition.x = (event.clientX / window.innerWidth ) *  2 - 1;
        pickPosition.y = (event.clientY / window.innerHeight) * -2 + 1;  // note we flip Y
    }

    function clearPickPosition() {
        // 对于触屏，不像鼠标总是能有一个位置坐标，
        // 如果用户不在触摸屏幕，我们希望停止拾取操作。
        // 因此，我们选取一个特别的值，表明什么都没选中
        pickPosition.x = -100000;
        pickPosition.y = -100000;
    }

    window.addEventListener('mousemove', setPickPosition);

    clearPickPosition();
    init();
    animate();
</script>
</body>
</html>